<template lang="pug">
.trend-view
    Layout(style="")
        Content
            .content__whole(v-if="viewName === 'whole'")
                Card(style="width:100%;",dis-hover)
                    .test-chart
                        time-line( v-if="viewChannel=== -1")
</template>

<script>
import timeLine from '@/components/TimeLine/index';
import trendLine from '@/components/TrendLine';

export default {
    data() {
        return {
            menuItems: [
                '转速 SPEED',
                '电压 U30',
                '电压 U45',
                '电压 U50',
                '电流 I30',
                '电流 I50'
            ],
            activeMenu: -1,
            viewName: 'whole',
            viewChannel: -1,
            lineData: [],
            trendData: []
        };
    },
    computed: {
        starterId() {
            return this.$store.state.starterId;
        },
        testId() {
            return this.$store.state.testId;
        }
    },
    watch: {
        testId(newVal, oldVal) {
            this.loadLine(this.testId);
        }
    },
    components: {
        timeLine,
        trendLine
    },
    filters: {
        channel(value, name) {
            return value.map(d => {
                return {
                    test_id: d.test_id,
                    row_id: d.row_id,
                    channel: d[name]
                };
            });
        }
    },
    methods: {
        menuActive(i) {
            this.activeMenu = i;
            this.viewName = 'whole';
            this.viewChannel = i;
        },
        display(name) {
            this.viewChannel = -1;
            this.activeMenu = -1;
            this.viewName = name;
        },
        // 载入曲线数据
        loadLine(testId) {
            // this.$http
            //     .get('/starter/detail/', {
            //         params: {
            //             starterId: this.starterId,
            //             testId: testId
            //         }
            //     })
            //     .then(res => {
            //         this.lineData = res.data.sort((a, b) => {
            //             return a.row_id - b.row_id;
            //         });
            //     })
            //     .catch(() => {
            //         this.$Message.error('数据载入错误');
            //     });
        },
        // 载入趋势数据
        loadTrend(params) {
            // this.$http
            //     .get('/starter/overview/selection/trend/', {
            //         params: params
            //     })
            //     .then(res => {
            //         this.trendData = res.data;
            //     })
            //     .catch(() => {
            //         this.$Message.error('趋势数据载入错误');
            //     });
        },
        clearData() {
            this.lineData = [];
            this.trendData = [];
        }
    }
};
</script>

<style lang="less">
.trend-view {
    width: 100%;
    // height: 470px;
    .ivu-card-body {
        padding: 0;
    }
    .content {
        &__whole {
            width: 100%;
            height: 100%;
            .test-chart {
                // width: 1087px;
                // height: 468px;
                background-color: white;
            }
        }
        &__part {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            .trend-chart {
                width: 300px;
                height: 220px;
            }
        }
    }
    .menuHeader {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: left;
        padding: 0 10px;
        font-weight: 700;
        color: #1c2438;
        position: relative;
        border-bottom: 1px solid #e9eaec;
    }
    .menuCtrl {
        position: absolute;
        top: 0;
        right: 5px;
    }
    .menuBody {
        width: 100%;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        ul {
            background-color: #e9eaec;
        }
        li {
            height: 30px;
            line-height: 30px;
            text-align: left;
            padding-left: 20px;
            font-size: 12px;
            border-bottom: 1px solid white;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            transition: background-color 0.5s;
            &.active {
                border-left: 2px solid #ff9100;
            }
            &:hover {
                background-color: #ebf7ff;
                cursor: pointer;
            }
        }
    }
}
</style>
